<template>
	<view class="page">
		<div class="weui-search-bar" style="position: relative;">
			<i class="weui-icon-search"></i>
			<input type="search" class="search-input pbt2" id='search' placeholder='请输入期刊名称关键字....' /><button class="weui-btn weui-btn_mini"><span
				 class="iconfont icon-wodedangxuan-copy f-green f16"></span></button>
		</div>
		<!-- 搜索end -->
		<div class="weui-flex padding5">
			<div class="weui-flex__item">
				<div class="placeholder">
					<img src="https://www.physics.sjtu.edu.cn/sites/www.physics.sjtu.edu.cn/files/vop_1.png" alt="">
					<p>校友第17期</p>
				</div>
			</div>
			<div class="weui-flex__item">
				<div class="placeholder">
					<img src="https://www.physics.sjtu.edu.cn/sites/www.physics.sjtu.edu.cn/files/vop_1.png" alt="">
					<p>校友第16期</p>
				</div>
			</div>
			<div class="weui-flex__item">
				<div class="placeholder">
					<img src="https://www.physics.sjtu.edu.cn/sites/www.physics.sjtu.edu.cn/files/vop_1.png" alt="">
					<p>校友第15期</p>
				</div>
			</div>

		</div>
		<!-- san end -->
		<div class="weui-flex padding5">
			<div class="weui-flex__item">
				<div class="placeholder">
					<img src="https://www.physics.sjtu.edu.cn/sites/www.physics.sjtu.edu.cn/files/vop_1.png" alt="">
					<p>校友第14期</p>
				</div>
			</div>
			<div class="weui-flex__item">
				<div class="placeholder">
					<img src="https://www.physics.sjtu.edu.cn/sites/www.physics.sjtu.edu.cn/files/vop_1.png" alt="">
					<p>校友第13期</p>
				</div>
			</div>
			<div class="weui-flex__item">
				<div class="placeholder">
					<img src="https://www.physics.sjtu.edu.cn/sites/www.physics.sjtu.edu.cn/files/vop_1.png" alt="">
					<p>校友第12期</p>
				</div>
			</div>

		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.placeholder {
		margin: 5px;
		padding: 0 0.1rem;
/* 		height: 100%; */
		text-align: center;
	}

	.placeholder img {
		width: 100%;
		height: 40vw;
		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	}
	.placeholder p{
		font-size: 25upx;
	}
	.page .weui-flex {

		align-items: center;
		padding: 10px;
		transition: all 0.3s ease 0s;
		display: -webkit-flex;
		display: -webkit-box;
		display: flex;
	}

	.page .weui-flex--item {
		-webkit-flex: 1 1 0;
		flex: 1 1 0;
	}

	.page .weui-cells {
		margin-top: 0;
	}

	.page .content {
		font-size: 16px;
		text-indent: 2em;
		margin: .5em auto;
		padding: 0 0.5em;
	}
	
</style>
